<template>
  <div class="card-border">
    <div class="flex items-center py-[6px]">
      <div class="flex-1">
        <div class="supplier-dtl-title">产品加工说明</div>
      </div>
    </div>

    <el-table :data="listData" :row-class-name="rowClassName">
      <el-table-column prop="product_identification" label="加工类型">
        <template #default="{ row }"
          >{{ computedProduct(row.product_identification) }}
        </template>
      </el-table-column>
      <el-table-column prop="processing_method" label="加工说明">
        <template #default="{ row }">{{
          computedProcessing(row.processing_method)
        }}</template>
      </el-table-column>
      <el-table-column prop="date" label="是否回仓">
        <template #header>
          <div class="flex items-center">
            是否回仓
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="is_refund_warehouse_tooltip"
              placement="top-start"
            >
              <svg-icon icon-class="hint_cover2"></svg-icon>
            </el-tooltip>
          </div>
        </template>
        <template #default="{ row }">
          <template v-if="row.product_identification == 11 && row.processing_method == 1">
            {{ computedRefundWarehouse(row.is_refund_warehouse) }}
          </template>
          <template v-else>--</template>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="标识样式选择">
        <template #default="{ row }">{{ computedTagStyle(row) }}</template>
      </el-table-column>
      <el-table-column prop="date" label="样式图片">
        <template #default="{ row }">
          <VImage :src="row.image" />
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column label="操作" fixed="right" v-if="!disabled" width="80">
        <template #default="{ row, $index }">
          <!-- <el-button link type="danger" @click="handleDel($index)">删除</el-button> -->
          <el-button type="primary" link @click="handleEdit(row, $index)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <dialog-form
      ref="dialogFormRef"
      :supplier="supplier"
      @updateForm="updateForm"
    ></dialog-form>
  </div>
</template>

<script setup lang="jsx" name="productMarking">
import { toRefs } from "vue";
import dialogForm from "./dialogForm.vue";
import VImage from "@/components/Image/index.vue";
import { is_refund_warehouse_tooltip } from "@/utils/tooltip.js";

let handleType = reactive(inject("handleType"));
let options = reactive(inject("options"));

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [],
  },
  supplier: {
    type: Array,
    default: () => {
      return [];
    },
  },
  index: {
    type: Number,
    default: 0,
  },
});

const { supplier } = toRefs(props);

const disabled = computed(() => {
  return (
    handleType.value == "view" ||
    !(window.BTN_AUTH || []).includes("/goods/task/product/general-info")
  );
});

const listData = computed({
  get: () => {
    let list = [];
    supplier.value.map((i, idx) => {
      if (
        idx == props.index &&
        !i.delete &&
        i.goods_sku_identification_processing?.length
      ) {
        const goods_sku_identification_processing = i.goods_sku_identification_processing.map(
          (j, index) => {
            j.supplier_id = i.supplier_id;
            j.supplier_name = i.supplier_name;
            j.is_default_supplier = i.is_default_supplier;
            j.currentIndex = index;
            return j;
          }
        );
        list.push(...goods_sku_identification_processing);
      }
    });
    return list;
  },
  set: (val) => {
    emit("update:modelValue", val);
  },
});

const sku = computed({
  get: () => props.sku,
});

const dialogFormRef = ref();

// 新增、编辑回调
const updateForm = (row) => {
  const currentIndex = supplier.value.findIndex((i) => i.supplier_id == row.supplier_id);
  if (currentIndex == -1) return;
  if (row.id) {
    supplier.value[currentIndex].goods_sku_identification_processing.splice(
      row.currentIndex,
      1,
      row
    );
  } else {
    supplier.value[currentIndex].goods_sku_identification_processing.push(row);
  }
};

const rowClassName = ({ row }) => {
  if (row.delete === 1) {
    return "hidden-row";
  }
  return "";
};

// 删除
const handleDel = (index) => {
  if (
    handleType.value == "add" ||
    handleType.value == "copy" ||
    handleType.value == "createSKU"
  ) {
    listData.value.splice(index, 1);
  } else {
    listData.value[index].delete = 1;
  }
};

const computedProduct = (val) => {
  const item = options.value[
    "goods.GoodsSkuIdentificationProcessing"
  ]?.[0].productIdentificationText.find((i) => i.value == val);
  if (item) {
    return item?.label;
  }
};

const computedProcessing = (val) => {
  const item = options.value[
    "goods.GoodsSkuIdentificationProcessing"
  ]?.[0].processingMethodText.find((i) => i.value == val);
  if (item) {
    return item?.label;
  }
};

const computedTagStyle = (row) => {
  if (row.product_identification == 10) {
    const item = options.value[
      "goods.GoodsSkuIdentificationProcessing"
    ]?.[0].agentText.find((i) => i.value == row.tag_style);
    if (item) {
      return item?.label;
    }
  } else {
    const item = options.value[
      "goods.GoodsSkuIdentificationProcessing"
    ]?.[0].tagStyleText.find((i) => i.value == row.tag_style);
    if (item) {
      return item?.label;
    }
  }
};

const computedRefundWarehouse = (val) => {
  const item = options.value[
    "goods.GoodsSkuIdentificationProcessing"
  ]?.[0].isRefundWarehouseText.find((i) => i.value == val);
  if (item) {
    return item?.label;
  }
};

const emit = defineEmits(["editRow"]);

// 编辑
const handleEdit = (row, rowIndex) => {
  nextTick(() => {
    emit("editRow");
  });
};
</script>

<style lang="scss" scoped></style>
